<template >
<div class="top-nav" :class="[navMenuState ? 'navMenuState' : '']" data-v-7moor>
  <Navopen></Navopen>
  <switches></switches>
  <!--单点登录，extenTYpe为null时不启动软电话条-->
  <phoneBar v-if="$store.state.phoneBarShow && !flag"></phoneBar>
  <userInfo v-if="$store.state.phoneBarShow"></userInfo>
  <!-- 在线咨询自定义快捷回复，因为单点登录的时候extenTYpe为null时不启动软电话条，所以要放在此处 -->
  <div id="cust_quick_reply_set" v-show="isShowQuickReply" class="content-div" :class="[navMenuState ? 'navMenuState' : '' ]" style="display:none;">
    <div class="bread-crumb">
      <breadCrumb :titleArr="titleArr" @back="back('icon')"></breadCrumb>
      <i class="el-icon-close" @click.stop="back('icon')"></i>
    </div>
    <div class="set-div">
      <div  class="user_pic_quick_reply">
        <affix :label="$t('userInfo.quickReplyConfig')">
          <quickReplyMain :dataType="'customize'" :isShowQuickReply="isShowQuickReply"></quickReplyMain>
        </affix>
      </div>
    </div>
  </div>
</div>
</template>
<script>
  import Navopen from './NavOpen.vue'
  import Switches from './Switch'
  import UserInfo from './UserInfo'
  import PhoneBar from './PhoneBar'
  import bus from '@/store/eventBus'
  import breadCrumb from '@/components/ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import quickReplyMain from '@/components/business-modules/config/channelConfig/webchatGlobalConfig/quickReplyMain.vue'
  import affix from '@/components/ui-modules/affix/Affix.vue'

  export default {
    name: 'top-nav',
    data () {
      return {
        flag: this.$store.getters.isEcommerce ? true : false, // 是否是电商平台
        isShowQuickReply: false,
        titleArr: [this.$t('public.getback')]
      }
    },
    components: {
      Switches,
      PhoneBar,
      UserInfo,
      Navopen,
      breadCrumb,
      quickReplyMain,
      affix
    },
    computed: {
      navMenuState () {
        return this.$store.state.navMenuState || false
      }
    },
    mounted () {
      this.$store.dispatch('initPhone') // 初始化电话条
      let self = this
      bus.$on('showCustQuickReply', (msg) => {
        if (msg.data) {
          self.isShowQuickReply = true
        } else {
          self.isShowQuickReply = false
        }
      })
    },
    methods: {
      //      关闭自定义快捷回复设置
      back (flag) {
        let self = this
        let pane = document.getElementById('cust_quick_reply_set')
        if (pane) {
          if (flag === 'icon') {
            self.isShowQuickReply = false
            return
          }
          if (pane.style.display === 'none') {
            self.isShowQuickReply = true
          }
        }
      }
    },
    beforeDestroy () {
      bus.$off('showCustQuickReply')
    }
  }
</script>
<style scoped lang="stylus">
@import "../../../assets/common.styl";
.top-nav
  width calc(100% - 56px)
  height 52px
  /*background  #f1f5f8*/
  background  #e9ebed
  border-bottom  1px solid #ccc !important
  box-shadow 0 0 4px 0 rgba(0,0,0,.10), 0 2px 8px 0 rgba(170,182,206,.2), inset 0 -1px 0 0 rgba(255,255,255,.2)
  posa(0,56px)
  z-index 2001
.top-nav.navMenuState
  width calc(100% - 120px)
  posa(0,120px)
.right
  margin-left 30.54em
.content-div
  position fixed
  left 56px
  top 52px
  width calc(100vw - 56px)
  height calc(100vh - 52px)
  background-color #fff
  z-index 1001
  overflow-y auto
  .bread-crumb
    margin-bottom 20px
    position relative
    .el-icon-close
      position absolute
      right 20px
      top 12px
      color #bfcbd9
      cursor pointer
      font-weight bold
      &:hover
        color $c-main
  .set-div
    padding 3px 10px
    .form-div
      width 500px
      margin-bottom 65px
.content-div.navMenuState
  left 120px
  width calc(100vw - 120px)
</style>
